/* eslint-disable react-native/no-inline-styles */
import React, { Component } from 'react';
import { View, StyleSheet, Text, Image, TouchableOpacity } from 'react-native';
import styled from 'styled-components';
import { applyRepaireList } from '../../../api/index';
import { getToken } from '../../../utils/auth';
import { Actions } from 'react-native-router-flux';

export default class repaireDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '故障报修详情',
      imgUrl: require('../../../assets/work/sportsRankings/backtrack.png'),
      details: {},
      arr: []
    };
  }
  componentWillMount() {
    getToken().then(token => {
      applyRepaireList(token, this.props.navigation.state.params.bdId).then(
        res => {
          if (res.code === '0') {
            console.log(res.data.rows);
            this.setState({ details: res.data.rows[0] });
            let arr = [];
            for (let i = 0; i < +this.state.details.bmiCommentRank; i++) {
              arr.push({ key: i });
            }
            this.setState({ arr });
          } else {
          }
        }
      );
    });
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <View style={styles.header}>
          <TouchableOpacity
            style={{ width: 25.67, height: 22.33, marginBottom: 5 }}
            onPress={() => Actions.pop()}>
            <View>
              <Image
                source={this.state.imgUrl}
                style={{ width: 25.67, height: 22.33, marginBottom: 5 }}
              />
            </View>
          </TouchableOpacity>
          <View
            style={{
              borderBottomColor: '#EDEDED',
              borderBottomWidth: 1,
              borderBottomStyle: 'dashed',
              paddingBottom: 10,
              flexDirection: 'row',
              justifyContent: 'space-between',
              position: 'relative',
              bottom: 0
            }}>
            <Text style={{ fontSize: 30, fontWeight: 'bold' }}>
              {this.state.title}
            </Text>
            <View>
              <TouchableOpacity
                onPress={({ nativeEvent: e }) => {
                  console.log('show : ');
                }}>
                <Image
                  source={require('../../../assets/work/inform/moreHandle.png')}
                  style={{
                    width: 16.75,
                    height: 3.5,
                    marginTop: 18
                  }}
                />
              </TouchableOpacity>
            </View>
          </View>
        </View>
        <View
          style={{
            width: '100%',
            height: '100%',
            marginTop: 10,
            padding: 20,
            backgroundColor: '#fff'
          }}>
          <View
            style={{
              borderBottomWidth: 1,
              borderBottomColor: '#ccc',
              paddingTop: 10
            }}>
            <View
              style={{
                flexDirection: 'row',
                height: 30,
                borderLeftWidth: 10,
                paddingLeft: 20,
                borderLeftColor: '#4CB4FB'
              }}>
              <LabelText style={{ lineHeight: 30 }}>
                上报人：{' '}
                <Text style={{ color: '#000' }}>
                  {' '}
                  {this.state.details.declareName}
                </Text>
              </LabelText>
              <LabelText style={{ marginLeft: 20, lineHeight: 30 }}>
                申报部门：{' '}
                <Text style={{ color: '#000' }}>
                  {' '}
                  {this.state.details.bdDept}
                </Text>
              </LabelText>
            </View>
            <View style={{ paddingLeft: 30 }}>
              <LabelText style={{ lineHeight: 30 }}>
                故障类型：{' '}
                <Text style={{ color: '#000' }}>
                  {' '}
                  {this.state.details.bdType}
                </Text>
              </LabelText>
            </View>
            <View style={{ paddingLeft: 30 }}>
              <LabelText style={{ lineHeight: 30 }}>
                故障描述：{' '}
                <Text style={{ color: '#000' }}>
                  {' '}
                  {this.state.details.bdExplain}
                </Text>
              </LabelText>
            </View>
            <View style={{ paddingLeft: 30 }}>
              <LabelText style={{ lineHeight: 30 }}>
                上报时间：{' '}
                <Text style={{ color: '#000' }}>
                  {' '}
                  {this.state.details.bdDeclareDate}
                </Text>
              </LabelText>
            </View>
            <View style={{ paddingLeft: 30 }}>
              <LabelText style={{ lineHeight: 30 }}>
                流程状态：{' '}
                <Text style={{ color: '#000' }}>
                  {' '}
                  {this.state.details.bdState}
                </Text>
              </LabelText>
            </View>
          </View>
          <View
            style={{
              paddingTop: 10
            }}>
            <View
              style={{
                flexDirection: 'row',
                height: 30,
                borderLeftWidth: 10,
                paddingLeft: 20,
                borderLeftColor: '#4CB4FB'
              }}>
              <LabelText style={{ lineHeight: 30 }}>
                维修人：{' '}
                <Text style={{ color: '#000' }}>
                  {' '}
                  {this.state.details.bmiMaintainName}
                </Text>
              </LabelText>
            </View>
            <View style={{ paddingLeft: 30 }}>
              <LabelText style={{ lineHeight: 30 }}>
                维修时间：{' '}
                <Text style={{ color: '#000' }}>
                  {' '}
                  {this.state.details.bmiMaintainDate}
                </Text>
              </LabelText>
            </View>
            <View style={{ paddingLeft: 30 }}>
              <LabelText style={{ lineHeight: 30 }}>维修记录：</LabelText>
              <View>
                {/* {!!this.state.details.bmiMaintainExplain &&
                  this.state.details.bmiMaintainExplain.map(e => ( */}
                <Text
                  style={{
                    fontSize: 16,
                    borderBottomWidth: 1,
                    borderBottomColor: '#ccc'
                  }}>
                  {this.state.details.bmiMaintainExplain}
                </Text>
                {/* ))} */}
              </View>
            </View>
          </View>
          <View
            style={{
              paddingTop: 10
            }}>
            <View
              style={{
                flexDirection: 'row',
                height: 30,
                borderLeftWidth: 10,
                paddingLeft: 20,
                borderLeftColor: '#4CB4FB'
              }}>
              <LabelText style={{ lineHeight: 30 }}>
                评星等级：{' '}
                <Text style={{ color: '#000' }}>
                  {this.state.arr.length &&
                    this.state.arr.map(e => {
                      <Image
                        style={{ width: 15, height: 15 }}
                        source={require('../../../assets/work/repaire/score.png')}
                      />;
                    })}
                </Text>
              </LabelText>
            </View>
            <View style={{ paddingLeft: 30 }}>
              <LabelText style={{ lineHeight: 30 }}>
                评星内容：{' '}
                <Text style={{ color: '#000' }}>
                  {' '}
                  {this.state.details.bmiComment}
                </Text>
              </LabelText>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    width: '100%',
    height: 98,
    backgroundColor: '#FFFFFF',
    padding: 19.33
  },
  textareaContainer: {
    height: 180,
    padding: 5,
    backgroundColor: '#F5FCFF'
  },
  textarea: {
    textAlignVertical: 'top', // hack android
    height: 170,
    fontSize: 14,
    color: '#333'
  }
});
const LabelText = styled.Text`
  color: #ccc;
`;
// AppRegistry.registerComponent('ECharts', () => ECharts);
